<!doctype HTML>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../assert_selection.js"></script>
<div id="log"></div>
<script>
test(function(){
    assert_selection(
        '<div contenteditable="true" id="div" style="-webkit-user-select:all">foo</div>',
        selection => selection.collapse(selection.document.getElementById('div').firstChild, 1),
        '<div contenteditable="true" id="div" style="-webkit-user-select:all">f|oo</div>');
    assert_selection(
        '<div contenteditable="true" id="div" style="-webkit-user-select:all">f|oo</div>',
        selection => selection.extend(selection.document.getElementById('div').firstChild, 2),
        '<div contenteditable="true" id="div" style="-webkit-user-select:all">f^o|o</div>');
    assert_selection(
        '<div contenteditable="true" id="div" style="-webkit-user-select:all">foo</div>',
        selection => {
            var div = selection.document.getElementById('div');
            selection.setBaseAndExtent(div.firstChild, 1, div.firstChild, 2);
        },
        '<div contenteditable="true" id="div" style="-webkit-user-select:all">f^o|o</div>');
    assert_selection(
        '<div contenteditable="true" id="div" style="-webkit-user-select:all">foo</div>',
        selection => {
            var range = selection.document.createRange();
            var div = selection.document.getElementById('div');
            range.setStart(div, 0);
            range.setEnd(div, 1);
            selection.addRange(range);
        },
        '<div contenteditable="true" id="div" style="-webkit-user-select:all">^foo|</div>');
    assert_selection(
        '<div contenteditable="true" id="div" style="-webkit-user-select:all">|foo</div>',
        selection => selection.modify('move', 'forward', 'character'),
        '<div contenteditable="true" id="div" style="-webkit-user-select:all">f|oo</div>');
    assert_selection(
        '<div contenteditable="true" id="div" style="-webkit-user-select:all">f|oo</div>',
        selection => selection.modify('move', 'backward', 'character'),
        '<div contenteditable="true" id="div" style="-webkit-user-select:all">|foo</div>');
    assert_selection(
        '<div contenteditable="true" id="div" style="-webkit-user-select:all">|foo</div>',
        selection => selection.modify('extend', 'forward', 'character'),
        '<div contenteditable="true" id="div" style="-webkit-user-select:all">^f|oo</div>');
    assert_selection(
        '<div contenteditable="true" id="div" style="-webkit-user-select:all">foo|</div>',
        selection => selection.modify('extend', 'backward', 'character'),
        '<div contenteditable="true" id="div" style="-webkit-user-select:all">fo|o^</div>');
    },
'Selection API can edit in -webkit-user-select:all contenteditable element');

test(function(){
    assert_selection(
        '<div contenteditable="true" id="div" style="-webkit-user-select:all">|foo</div>',
        selection => selection.document.execCommand('insertText', false, 'bar'),
        '<div contenteditable="true" id="div" style="-webkit-user-select:all">bar|foo</div>');
    },
'Execcommand inserttext in -webkit-user-select:all contenteditable element');

test(function(){
    assert_selection(
        '<div contenteditable="true" id="div" style="-webkit-user-select:all">foo</div>',
        selection => assert_true(selection.document.getElementById('div').isContentEditable),
        '<div contenteditable="true" id="div" style="-webkit-user-select:all">foo</div>');
    },
'-webkit-user-select:all contenteditable element is HTMLElement.isContentEditable == true');
</script>
